// 导入path模块处理路径
const path = require('path');
// 导入删除冗余文件的模块
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 导入生成Html模板的模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 导入提取css代码的模块
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// [hash:8] 8个随机字符 index-bundle-728374982473.js  从而减少文件的缓存

// 配置选项
const option = {
    // 项目入口
    entry: {
        main: './src/main.js',
        xxx: './src/xxx.js',
    },
    // 打包输出
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './js/[name]-bundle-[hash:8].js'
    },
    // 配置loader 加载非JS文档
    module: {
        rules: [
            // 加载css文档
            {
                test: /\.css$/i,
                use: [
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    "css-loader"
                ],
            },
            // 加载less文档
            {
                test: /\.less$/i,
                use: [
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    "css-loader",
                    "less-loader",
                ],
            },
            // 加载sass文档
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 把js写入boundle.js文档中
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    // 把css转成js
                    "css-loader",
                    // 把sass文档编译成css
                    "sass-loader",
                ],
            },
            // 加载图片资料 
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        // options: {
                        //     limit: 8192,//  小于等于8kb 转base64格式图片
                        // },
                        options: {
                            esModule: false, // 关闭ES中的严格模式
                            limit: 8192,// 限制大小
                            name: './imgs/demo-[name]-[hash:16].[ext]',// 设置文件目录和名称
                        }
                    },
                ],
            },
            // 加载html文档以及处理html文档中的img标签
            {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader'
            }
        ],
    },
    // 配置插件（清空冗余文件、提取css代码 、生成html模板） 
    plugins: [
        // 删除打包之后的冗余文件
        new CleanWebpackPlugin(),
        // 提取css代码
        new MiniCssExtractPlugin({
            filename: './css/[name]_[hash:8].css'
        }),
        // 处理html模板文件（可以在打包之后生成html文件）
        new HtmlWebpackPlugin({
            // 配置输出文件名称
            filename: 'index.html',
            // 配置src目录下html文件路径
            template: './public/index.html',
            // 配置页面标题
            title: '首页',
            // 配置导入代码块
            chunks: ['main'],
            // 插入script标签在body里面
            inject: 'body'
        }),
        // 处理html模板文件（可以在打包之后生成html文件）
        new HtmlWebpackPlugin({
            // 配置输出文件名称
            filename: 'xxx.html',
            // 配置src目录下html文件路径
            template: './public/index.html',
            // 配置页面标题
            title: 'xxx',
            // 配置导入代码块
            chunks: ['xxx'],
            // 插入script标签在body里面
            inject: 'body'
        })
    ],
   
}

// 模块系统下暴露配置选项
module.exports = option;